<template>

	<view class="popup" v-if="show && init">
		<view class="popup_item" :class="{'active':show}">
			<view class="popup_item_top">
				<!-- <view class="popup_item_title">输入名称进行搜索</view> -->
				<!-- 	<view class="business_serach">
					<u-icon name="e61e" size="40" color="#939393" custom-prefix="iconfont" />
					<input class="business_serach_input u-m-l-10" type="text" v-model="searchValue" placeholder="搜索名称"
						placeholder-style="color:#939393" />
				</view> -->
			</view>
			<view class="popup_content">
				<scroll-view scroll-y="true" class="popup_content_item popup_content_left ">
					<view class="popup_c_item " :class="{'popup_c_item_active':father_id==index}"
						v-for="(item,index) in industryList " :key='index' @click="onFather(item,index)">{{item.name}}
					</view>
					<view class="zw"></view>
				</scroll-view>

				<scroll-view scroll-y="true" class="popup_content_item popup_content_right ">
					<view class="popup_c_item " :class="{'popup_c_item_active':son_id==index}"
						v-for="(item,index) in industrySonList " :key='index' @click="onSon(item,index)">{{item.name}}
					</view>
					<view class="zw"></view>
				</scroll-view>
			</view>

		</view>

		<view class="popup_btn">
			<view class="popup_btn_item popup_btn_item_left" @click="onReset">重置</view>
			<view class="popup_btn_item popup_btn_item_right" @click="onSumbit">确认</view>
		</view>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				show: false,
				son_id: 0,
				father_id: 0,
				industryList: [],
				industrySonList: [],
				init: false
			}
		},

		methods: {
			initPage() {
				this.$resPost('GetCommonClassify', {
					type: 22,
					page_size:999
				}).then(res => {

					if (res.data[0]) {
						res.data.forEach((el, index) => {
							if (!el.subordinate) {
								el.subordinate = [{
									pk_id: this.$u.guid(),
									name: '全部'
								}]
							} else if (el.subordinate[0]) {
								el.subordinate.unshift({
									pk_id: this.$u.guid(),
									name: '全部'
								})
							}

						})

						this.industryList = res.data
						this.industrySonList = res.data[0].subordinate
						this.init = true
					}

				})
			},
			onShowPopup() {
				this.show = true
				this.initPage()
			},
			onFather(row, index) {
				this.father_id = index
				this.industrySonList = this.industryList[index].subordinate
				this.son_id = 0
			},
			onSon(row, index) {
				this.son_id = index
			},
			onReset() {
				this.onHidePopup()
				this.$emit('callBack', undefined)
			},
			onSumbit() {
				let {
					industryList,
					father_id,
					son_id
				} = this
				let one = industryList[father_id].name

				let value = one
				let subordinate = industryList[father_id].subordinate
				if (subordinate[0] && subordinate[son_id].name != '全部') {
					value = `${value},${subordinate[son_id].name}`
				}
				this.$emit('callBack', value)
				this.son_id = 0
				this.onHidePopup()

			},
			onHidePopup() {
				this.show = false
			},
		},
	};
</script>

<style lang="scss" scoped>
	.popup {
		position: fixed;
		width: 750rpx;
		height: 100vh;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, .8);
		z-index: 9000;
		padding: 0 20rpx;
		
		.zw {
			width: 100%;
			height: 130rpx;
		}
		.line_1 {
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}

		.popup_content {
			display: flex;
			
			.popup_content_item {
				display: flex;
				align-items: center;
				color: #616161;
				font-size: 30rpx;
				height: 900rpx;
			}

			.popup_c_item {
				padding: 20rpx;
				display: flex;
				align-items: center;
				min-height: 90rpx;
			}

			.popup_c_item_active {
				background-color: #FFB000;
				color: #ffffff;
			}

			.popup_content_left {
				flex: 2;

			}

			.popup_content_right {
				flex: 3;

				background-color: #F8F8F8;
			}
		}

		.popup_item {
			position: fixed;
			width: 100%;
			max-height: 90%;
			bottom: 0;
			left: 0;
			background-color: #ffffff;
			transform: translateY(-100%);
			transition: all 2s ease;
			padding-bottom: env(safe-area-inset-bottom);
			// border-top-left-radius: 25rpx;
			// border-top-right-radius: 25rpx;

			&.active {
				transition: all 2s ease;
				transform: translateY(0%) !important;
			}
		}

		.popup_btn {
			display: flex;
			justify-content: center;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			color: #ffffff;
			padding: 20rpx 54rpx env(safe-area-inset-bottom);
			background-color: #ffffff;
			border-top: 1rpx solid #f5f5f5;
			z-index: 99;

			.popup_btn_item {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				height: 80rpx;
			}

			.popup_btn_item_left {
				background: #F4B840;
				border-radius: 40rpx 0rpx 0 40rpx;
			}

			.popup_btn_item_right {
				background: linear-gradient(270deg, #EB5929, #ED7D30);
				border-radius: 0 40rpx 40rpx 0;
			}
		}


		.popup_item_top {
			padding: 0 30rpx;

			.business_serach {
				display: flex;
				align-items: center;
				flex: 1;
				padding: 18rpx 28rpx;
				border-radius: 30rpx;
				background-color: #EEEEEE;
				height: 60rpx;
				// margin-top: 15rpx;
				margin: 15rpx 0 30rpx;
			}

			.popup_item_title {
				font-weight: bold;
				font-size: 35rpx;
				height: 90rpx;
				line-height: 90rpx;
			}

			.serach_name {
				display: flex;
				align-items: center;
			}

		}

	}
</style>
